<template>
    <el-dialog v-dialogDrag title="修改密码" :visible="passwordShow" width="40%" @close="dialogClose"
        :close-on-click-modal="false">
        <el-form ref="passForm" :model="passForm" :rules="rules" label-width="auto">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="passForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" prop="auditor">
                <el-input v-model="passForm.auditor" placeholder=""></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item label="验证码" prop="smsCode">
                <el-input v-model="passForm.smsCode" placeholder="请输入6位验证码" maxlength="6" show-word-limit
                    class="input_width" style="width:70%;margin-right: 2%;"></el-input>
                <el-button v-bind:type="button_sms_type" v-on:click="sendSmsCode" v-bind:disabled="button_sms_disable">
                    {{button_sms_value}}</el-button>
            </el-form-item>
            <el-button type="primary" style="margin-left:35%;margin-top: 3%;">
                提交
            </el-button>
            <el-button type="primary" @click="personalProfil">
                返回
            </el-button>
        </el-form>
    </el-dialog>

</template>
  
<script>
export default {
    name: 'PersonalPassword',
    props:{
        passwordShow:{
            type:Boolean
        },
        password:{
            type:String
        }
    },
    data () {
        
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 18) {
                        callback(new Error('必须年满18岁'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passForm.checkPass !== '') {
                    this.$refs.passForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.passForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            button_sms_type: 'success',
            button_sms_value: '验证码',
            button_sms_disable: false,
            sms_time_count: 60,
            sms_timer: null,
            passForm: {
                pass: '',
                checkPass: '',
                age: ''
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }
        };
    },

    methods: {
        personalProfil() {
            // this.$router.push('/personal')
            this.$emit('dialogClose')
        },

        sms_count_down() {
            sendSmsCode
            // 验证码倒计时
            if (!this.sms_timer) {
                this.count = this.sms_time_count
                //验证码发送成功，倒计时
                this.button_sms_type = 'info'
                this.button_sms_disable = true
                this.button_sms_value = "已发送(" + this.count + ")"

                //第一种缩写写法
                this.sms_timer = setInterval(() => {
                    if (this.count > 0 && this.count <= this.sms_time_count) {
                        this.count--

                        this.button_sms_value = "已发送(" + this.count + ")"
                        console.log(this.count)
                    } else {
                        clearInterval(this.sms_timer)
                        this.sms_timer = null
                        console.log('倒计时结束')
                        this.button_sms_type = 'success'
                        this.button_sms_disable = false
                        this.button_sms_value = '验证码'

                    }
                }, 1000)
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
  
<style>
.content {
    background-color: #ffffff;
    border-radius: 5px;
    width: 50%;
    margin: 0 auto;
    padding: 2%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
  